<template>
   <div class="formItem">
        <div class="bottomBox">
        <div class="searchsize">
          <el-col  class="searchBox flex">
            <!-- <el-input
                class="w-10 m-2 mr-16 float-left"
                v-model="modeldata.searchValue.keyWord"
                placeholder="请输入车头牌号/车队"
                clearable
            /> -->
            <el-select
                    class="mr-16 float-left"
                    v-model="modeldata.searchValue.courseState"
                    placeholder="请选择状态"
                    clearable
                    >
                      <el-option
                              v-for="item in modeldata.dropdown.courseStateList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                              />
            </el-select>
            <span class="dateInput">
                 <el-date-picker
                        class="w-10 m-2 mr-16"
                        v-model="modeldata.searchValue.startTime"
                         type="datetimerange"
                        range-separator="至"
                        start-placeholder="培训开始时间"
                        end-placeholder="培训结束时间"
                        value-format="YYYY-MM-DD HH:mm:ss"
                    />            
            </span>
            <el-button type="info" plain @click="reset">重置</el-button>
            <el-button type="primary" plain  @click="queryTableData"
            >查询</el-button>
          </el-col>
        </div>
        <div class="chartstyle">
          <el-table
              :data="modeldata.table.tableData"
              :header-cell-style="{ background: '#F2F5FA' }"
              border
              style="width: 100%"
          >
          <el-table-column prop="courseName" label="培训课程" min-width="10%" />
            <el-table-column prop="beginTime"   label="培训开始时间" min-width="10%" />
            <el-table-column prop="endTime"  label="培训结束时间" min-width="10%" />
            <el-table-column prop="courseState" label="培训状态" min-width="10%" >
                <template #default="scope">
                    <span v-if="scope.row.courseState === 1">
                            <el-tag 
                            type=""
                            effect="light"
                            disable-transitions
                            >{{scope.row.courseStateStr}}</el-tag>
                    </span>
                    <span v-if="scope.row.courseState === 2">
                            <el-tag 
                            type="warning"
                            effect="light"
                            disable-transitions
                            >{{scope.row.courseStateStr}}</el-tag>
                    </span>
                    <span v-if="scope.row.courseState === 3">
                            <el-tag 
                            type="danger"
                            effect="light"
                            disable-transitions
                            >{{scope.row.courseStateStr}}</el-tag>
                    </span>
                     <span v-if="scope.row.courseState === 4">
                            <el-tag 
                            type="info"
                            effect="light"
                            disable-transitions
                            >{{scope.row.courseStateStr}}</el-tag>
                    </span>
                </template>
            </el-table-column>
          </el-table>
          <div class="demo-pagination-block mt-16 mb-16">
            <el-pagination
                :pageIndex="modeldata.table.pageIndex"
                :page-size="modeldata.table.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="modeldata.table.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
</template>
<script setup>
import { reactive, ref, markRaw, defineProps,onBeforeMount} from "vue";
import {  findCourse as findCourse}  from '@/api/train.js'
let props = defineProps({
  userId: {
    type: String,
  },
});
let modeldata =  reactive({
  searchValue:{
    courseState:'',
    timeframe:'',
    beginTime:'',
    endTime:''
  },
  dropdown:{
   courseStateList:[{
                      label: "未开始",
                      value: 1
                    },{
                      label: "培训中",
                      value: 2
                    },{
                      label: "未参加",
                      value: 3
                    },{
                      label: "已参加",
                      value: 4
                    },]
  },
  table:{
    tableLoading: false,
    pageIndex: 1,
    pageSize: 10,
    total:0,
    tableData: [],
  }
})
const queryTableData = () => {
  modeldata.table.tableLoading = true;
  let obj = JSON.parse(JSON.stringify(modeldata.searchValue));
  obj.beginTime = obj.timeframe?getymdhms(obj.timeframe[0]):"",
  obj.endTime = obj.timeframe?getymdhms(obj.timeframe[1]):"",
  obj.pageIndex = modeldata.table.pageIndex
  obj.pageSize = modeldata.table.pageSize
  obj.userId = props.userId
  findCourse(obj)
    .then((res)=>{
      modeldata.table.tableLoading = false;
      if(res.code === 200){
        console.log(res)
          let data = res.body;
          modeldata.table.tableData=data&&data?data.data:[];
          modeldata.table.total = data&&data.total?data.total:0;
        }else{
            ElNotification({
              title: '提示',
              message: res.message?res.message:'服务器异常',
              type: 'warning',
            })
            if(res.code === 100007 ||  res.code === 100008 ||  res.code === 100011){
                    store.dispatch('app/logout')
                }
        }
    })
    .catch(()=>{})
};
const reset = () => {
    modeldata.searchValue = {}
    queryTableData();
}
onBeforeMount(() => {
    queryTableData()
})
//切换一页显示多少条数据
const handleSizeChange = (val) => {
  modeldata.table.pageSize = val;
  queryTableData();
};
// 点击跳转到第几页
const handleCurrentChange = (val) => {
  modeldata.table.pageIndex = val;
  queryTableData();
};
</script>
<style lang="less" scoped>
 .formItem{
     padding: 0px 56px 16px !important;
 }
 .demo-pagination-block {
     float: right;
}
</style>